<h1>Hipermedio</h1>

<div id="contenedor">
<h2>Palabras clave</h2>
<div id="cloud">
<?php 
    foreach($palabras_claves as $palabra_clave):?>
        <div id="tag_<?php echo $palabra_clave->getId()?>" class="tags tag<?php echo $palabra_clave->calcularDiscreto()?>"><?php echo $palabra_clave->getTag();?></div>
<?php endforeach; ?>
</div>

<div id="nodos">
    <div id="nodo_padre">
      <h1>Nodo Padre</h1>
      <p>Arrastra aquí los conceptos de la nube</p>
    </div>
    
    
    <div id="nodos_hijos">
        <?php for($i=1; $i < 4; $i++):?>
            <div id="bloque_<?php echo $i?>" class="nodo_hijo">
                <h1>Nodo <?php echo $i?></h1>
                <p>Arrastra aquí los conceptos de la nube</p>
            </div>
        <?php endfor;?>
    </div>
    
    <div id="nodos_nietos">
        <?php for($j=1; $j < 4; $j++):?>
            <?php for($i=1; $i < 4; $i++):?>
                <div id="bloque_<?php echo $i?>_<?php echo $j?>" class="nodo_nieto">
                    <h1>Nodo <?php echo $i.'.'.$j?></h1>
                    <p>Arrastra aquí los conceptos de la nube</p>
                </div>
            <?php endfor;?>
        <?php endfor;?>
    </div>
    
    
    <?php
//    echo jq_drop_receiving_element('#nodo_padre',array(
//        'url'   =>  'nodo/agregarPadre?ensayo_id='.$ensayo->getId(),
//        'accept' => '.tags',  
//        'update' => 'nodo_padre',
//        'hoverClass' => '.hoverclass'
//    )) ?>
    
    <script type="text/javascript">
        $( "#nodo_padre" ).droppable({
                accept: '.tags',
                drop: function( event, ui ) {
                    $('#nodo_0').val(ui.draggable.attr('id')) ;
                    $(this).addClass("ui-state-highlight").html("");
                }
        });
        <?php
        for($i=1; $i < 4; $i++){?>
            $( "#bloque_<?php echo $i?>" ).droppable({
                    accept: '.tags',
                    drop: function( event, ui ) {
                        $('#nodo_<?php echo $i?>').val(ui.draggable.attr('id')) ;
                        $(this).addClass("ui-state-highlight").html("");
                    }
            });

            <?php for($j=1; $j < 4; $j++):?>
                $( "#bloque_<?php echo $i?>_<?php echo $j?>" ).droppable({
                    accept: '.tags',
                    drop: function( event, ui ) {
                        $('#nodo_<?php echo $i?>_<?php echo $j?>').val(ui.draggable.attr('id')) ;
                        $(this).addClass("ui-state-highlight").html("");
                    }
                });
            <?php endfor;?>
        <?php }?>
    </script>
    
    <form action="<?php echo url_for("ensayo/agregar")?>" method="post">
        <input type="hidden" value="<?php echo $ensayo->getId() ?>" id="ensayo_id" name ="ensayo[id]"/>
        <input type="hidden" value="tag1" id="nodo_0" name="nodo[1]"/>
        <?php for($i=1; $i < 4; $i++):?>
            <input type="hidden" value="" id="nodo_<?php echo $i?>" name="nodo[1.<?php echo $i?>]"  />
            <?php for($j=1; $j < 4; $j++):?>
                <input type="hidden" value="" id="nodo_<?php echo $i?>_<?php echo $j?>" name="nodo[1.<?php echo $i?>.<?php echo $j?>]" />
            <?php endfor;?>
        <?php endfor;?>
        <input type="submit" value="Guardar" />
    </form>

</div>



</div>

<script>
  $(document).ready(function() {
    $(".tags").draggable({ revert: true });
  });
</script>